<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.css" />
    <!--<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/font-awesome.min.css" />-->
    <link rel="stylesheet" href="/lib/ace/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />
    <link rel="stylesheet" href="/lib/ace/css/ace.min.css" />

    <link rel="stylesheet" href="/css/view.css" />

    <title>分类管理</title>
    
</head>
<body>

    <div class="main-container ace-save-state" id="main-container">
        <div class="main-content">
            <div class="main-content-inner">
                <div class="page-content">
                    <div class="row" style="margin: 20px 10px 0px 20px">
                        <div class="col-md-12 col-md-border">
                            <div class="table-header">
                                <div style="font-size: 18px">
                                    分类列表 &nbsp;&nbsp;
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#addCategoryForm">
                                        <span class="glyphicon glyphicon-plus-sign" style="font-size: 16px; color:salmon"></span>
                                    </a>
                                </div>
                            </div>
                            <div id="categoryList">

                            </div>
                        </div>

                        <!-- 添加表单 -->
                        <div class="modal fade" id="addCategoryForm" tabindex="-1" role="dialog" aria-labelledby="categoryFormLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="addCategoryFormLabel">添加分类</h4>
                                    </div>
                                    <div class="modal-body">

                                        <form class="form-horizontal" role="form">

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    <span style="color: red;">*</span>上级分类:
                                                </label>

                                                <div class="col-sm-5">
                                                    <select class="form-control" id="form-field-select-1">
                                                        <option value="">所属上级分类</option>
                                                        <option value="AL">Alabama</option>
                                                        <option value="AK">Alaska</option>
                                                        <option value="AZ">Arizona</option>
                                                        <option value="AR">Arkansas</option>
                                                        <option value="CA">California</option>
                                                        <option value="CO">Colorado</option>
                                                        <option value="CT">Connecticut</option>
                                                        <option value="DE">Delaware</option>
                                                        <option value="FL">Florida</option>
                                                        <option value="GA">Georgia</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    <span style="color: red;">*</span>分类名称:
                                                </label>

                                                <div class="col-sm-5">
                                                    <input type="text" required placeholder="请输入分类名称" class="col-sm-12" />
                                                </div>
                                            </div>

                                            <div class="form-group">

                                                <label class="col-sm-4 control-label no-padding-right">
                                                    顺序:
                                                </label>

                                                <div class="col-sm-5">
                                                    <input type="text" placeholder="请输入顺序" class="col-sm-12" />
                                                </div>
                                            </div>

                                        </form>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" id="add_group_submit">立即提交</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/lib/jquery/jquery-2.1.1.min.js"></script>
    <script src="/lib/bootstrap/js/bootstrap.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <!--<script src="lib/ztree/jquery.ztree.all.min.js"></script>-->
    <script src="/lib/mustache/mustache.min.js"></script>
    <script src="/lib/ace/js/ace-elements.min.js"></script>
    <script src="/lib/ace/js/ace.min.js"></script>
    <script src="/js/category.js"></script>
    <script id="categoryListTemplate" type="x-tmpl-mustache">
        <ol class="dd-list ">
            {{#categoryList}}
                <li class="dd-item dd2-item category-name {{displayClass}}" id="category_{{id}}" href="javascript:void(0)" data-id="{{id}}">
                    <div class="dd2-content" style="cursor:pointer;">
                    {{name}}
                    &nbsp;
                    <a class="{{#showDownAngle}}{{/showDownAngle}}" href="#" data-id="{{id}}" >
                       <span class="glyphicon glyphicon-menu-down" name="sub-category" style="color: green"></span>
                    </a>
                    <span style="float:right;">
                        <a href="#" data-id="{{id}}" >
                            <span class="glyphicon glyphicon-pencil" style="color: green"></span>
                        </a>
                        &nbsp;
                        <a href="#" data-id="{{id}}" data-name="{{name}}">
                            <span class="glyphicon glyphicon-trash" style="color: red"></span>
                        </a>
                    </span>
                    </div>
                </li>
            {{/categoryList}}
        </ol>
    </script>
    <script type="text/javascript">
        $(function() {

            var categoryList; // 存储树形权限模块列表
            var categoryListMap = {}; // 存储map格式权限模块信息

            var categoryListTemplate = $('#categoryListTemplate').html();
            Mustache.parse(categoryListTemplate);

            loadCategory();

            function loadCategory() {
                $.ajax({
                    url: "/category/tree",
                    success : function (res) {
                        if (res.length > 0){
                            categoryList = res;
                            var rendered = Mustache.render(categoryListTemplate, {
                                categoryList: res,
                                "showDownAngle": function () {
                                    return function (text, render) {
                                        return (this.categoryList && this.categoryList.length > 0) ? "" : "hidden";
                                    }
                                },
                                "displayClass": function () {
                                    return "";
                                }
                            });

                            $("#categoryList").html(rendered);
                            recursiveRenderCategory(res);
                            bindCategoryClick();
                        }
                    }
                })
            }

            //递归渲染商品分类树
            function recursiveRenderCategory(categoryList) {
                if (categoryList.length > 0) {
                    $(categoryList).each(function (i, category) {
                        categoryListMap[category.id] = category;
                        if (category.categoryList.length > 0) {
                            var rendered = Mustache.render(categoryListTemplate, {
                                categoryList: category.categoryList,
                                "showDownAngle": function () {
                                    return function (text, render) {
                                        return (this.categoryList && this.categoryList.length > 0) ? "" : "hidden";
                                    }
                                },
                                "displayClass": function () {
                                    return "hidden";
                                }
                            });
                            $("#category_" + category.id).append(rendered);
                            recursiveRenderCategory(category.categoryList);
                        }
                    })
                }
            }


            function bindCategoryClick() {
                $("[name='sub-category']").on('click', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).parent().parent().parent().children().children(".category-name").toggleClass("hidden");
                    if($(this).is(".glyphicon-menu-down")) {
                        $(this).removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
                    } else{
                        $(this).removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
                    }
                })
            }
        });
    </script>
</body>

</html>